<template>
  <div class="search-author">
    <transition name="fade">
      <article class="main" v-if="loaded">
        <section>
          <div class="result-infomation">
            <div class="label"></div>
            <span class="bold-font">
              {{amount}}
            </span>
            <span>
              Results for Authors: 
            </span>
            <span class="bold-font">
              {{searchWord}}
            </span>
          </div>
          <div class="content">
            <div class="items">
              <author-search-block v-for="item in authors" :key="item.id" :author="item" class="item">
                {{item.name}}
              </author-search-block>
            </div>
            <pagination class="pages" :amount="amount" :page_size_menu="[20]"></pagination>
          </div>
        </section>
      </article>
      <div v-else class="search-loading">
        <loading></loading>
      </div>
    </transition>
  </div>
</template>

<script>
import {searchReq}
 from "@/requests/searchReq";

import Accordion from "@/components/Once/Search/Accordion/index";
import Pagination from '@/components/Once/Search/Pagination/SearchPagination.vue';
import Loading from '@/components/Loading/index';
import AuthorSearchBlock from '@/components/Block/AuthorSearchBlock';

export default {
  name: "SearchAuthor",
  props: {

  },
  data() {
    return {
      authors: [],
      amount: 0,
      loaded: false
    };
  },
  computed: {
    searchWord() {
      return this.$route.query.str;
    }
  },
  mounted() {
    this.load();
  },
  watch: {
    '$route' (to, from) {
      if(to.query.str !== from.query.str ||
       to.query.page !== from.query.page ||
       to.query.start !== from.query.start ||
       to.query.end !== from.query.end ){
        this.load();
      }  
    }
  },
  methods: {
    init() {
      this.loaded = false;
      this.articles = [];
    },
    load() {
      this.init();
      const allField = this.$route.query.str;
      const params = {allField, limit: 20, content: 'people'};
      if (this.$route.query.page) {
        params.startPage = this.$route.query.page - 1;
      }
      if (this.$route.query.start) {
        params.startYear = this.$route.query.start;
      }
      if (this.$route.query.end) {
        params.endYear = this.$route.query.end;
      }
      searchReq(params).then((res) => {
        const data = res.data.data;
        this.authors = data.info;
        this.loaded = true;
        this.amount = data.count;
      }).catch((err) => {
        console.log('搜索作者报错', err);
      });
    }
  },
  components: {
    Loading,
    Accordion,
    Pagination,
    AuthorSearchBlock
  },
};
</script>

<style scoped lang="scss">
.search-author {
  article {
    display: flex;
    // align-items: flex-start;
    flex-wrap: wrap;
    width: 1260px;
    margin: 0px auto;
    transition: ease-in-out .25s;
    
    // @media screen and (max-width: 1280px){
    //   width: 1000px;
    // }

    @media screen and (max-width: 1280px){
      margin-left: 2px;
      margin-right: 2px;
      width: auto;
    }

    section {
      padding: 30px 15px;
      @media screen and (max-width: 500px){
        padding: 30px 5px;
      }
      min-width: 670px;
      @media screen and (max-width: 720px){
        min-width: 300px;
      }
      flex: 1;
      .result-infomation {
        display: flex;
        align-items: center;

        .label {
          border-left: 8px solid #000;
          padding-left: 6px;
          border-color: #ebc34a;
          display: inline-block;
          height: 18px;
        }

        span {
          font-style: italic;
          padding-left: 10px;
          font-size: 18px;
          font-family: Merriweather Sans,sans-serif;

          &.bold-font {
            font-weight: 600;
          }
        }
      }

      .content {

        .items {
          margin-top: 30px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;

          @media screen and (max-width: 610px){
            justify-content: center;
          }
          .item {
            margin-bottom: 20px;
          }
        }

        .pages {
          display: flex;
          justify-content: center;
        }
      }



    }
  }
  .search-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
}
</style>
